<template>
  <div class="coding-input">
    <el-input
      v-model="currentValue"
      :placeholder="currentValue ? '' : placeholder"
      style="pointer-events: none; background-color: #f5f7fa;"
    >
      <template slot="prepend" v-if="showLabel">
        {{ label }}
      </template>
    </el-input>
    
    <!-- 编码规则信息提示 -->
    <div v-if="showRuleInfo && ruleInfo" class="rule-info">
      <el-tag size="mini" type="success">
        系统自动生成编码规则
      </el-tag>
      <el-tag v-if="isTemporaryCode && currentValue" size="mini" type="warning" style="margin-left: 5px;">
        临时编码（保存后生效）
      </el-tag>
    </div>
  </div>
</template>

<script>
import { generateCode, confirmCode } from '@/api/system/coding'

export default {
  name: 'CodingInput',
  props: {
    // 绑定值
    value: {
      type: String,
      default: ''
    },
    // 绑定的表名
    tableName: {
      type: String,
      required: true
    },
    // 绑定的字段名
    fieldName: {
      type: String,
      required: true
    },
    // 输入框占位符
    placeholder: {
      type: String,
      default: '自动生成编码中...'
    },
    // 是否显示标签
    showLabel: {
      type: Boolean,
      default: false
    },
    // 标签文本
    label: {
      type: String,
      default: '编码'
    },
    // 是否显示规则信息
    showRuleInfo: {
      type: Boolean,
      default: true
    },
    // 自动生成参数
    generateParams: {
      type: Object,
      default: () => ({})
    },
    // 是否为编辑模式
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentValue: '',
      ruleInfo: null,
      loading: false,
      _isMounted: false,
      isTemporaryCode: false, // 标记当前编码是否为临时编码
      confirmedCode: null // 已确认的编码
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.currentValue = newVal || ''
        // 如果传入了值，说明是编辑模式，标记为已确认的编码
        if (newVal && newVal.trim() !== '') {
          this.isTemporaryCode = false
          this.confirmedCode = newVal
        }
        // 如果是新增模式（非编辑模式且value为空）且组件已挂载，生成编码
        else if (this._isMounted && !this.isEdit && (!newVal || newVal.trim() === '')) {
          this.$nextTick(() => {
            this.generateNewCode()
          })
        }
      },
      immediate: true
    },
    currentValue(newVal) {
      this.$emit('input', newVal)
    },
    tableName: {
      handler() {
        this.loadRuleInfo()
        // 表名变化时，如果是新增模式，重新生成编码
        if (this._isMounted && !this.isEdit && (!this.value || this.value.trim() === '')) {
          this.$nextTick(() => {
            this.generateNewCode()
          })
        }
      },
      immediate: true
    },
    fieldName: {
      handler() {
        this.loadRuleInfo()
        // 字段名变化时，如果是新增模式，重新生成编码
        if (this._isMounted && !this.isEdit && (!this.value || this.value.trim() === '')) {
          this.$nextTick(() => {
            this.generateNewCode()
          })
        }
      },
      immediate: true
    }
  },
  mounted() {
    this._isMounted = true
    this.loadRuleInfo()
    // 如果是新增模式（非编辑模式且value为空），自动生成编码
    if (!this.isEdit && (!this.value || this.value.trim() === '')) {
      this.$nextTick(() => {
        this.generateNewCode()
      })
    }
  },
  methods: {
    // 加载编码规则信息
    async loadRuleInfo() {
      if (!this.tableName || !this.fieldName) return
      
      try {
        this.ruleInfo = {
          ruleName: `${this.tableName}.${this.fieldName}编码规则`
        }
      } catch (error) {
        console.error('加载编码规则失败:', error)
      }
    },
    
    // 生成新编码
    async generateNewCode() {
      if (!this.tableName || !this.fieldName) {
        console.warn('请先配置表名和字段名')
        return
      }
      
      // 检查是否为编辑模式或已有值
      if (this.isEdit || (this.value && this.value.trim() !== '')) {
        console.log('编辑模式或已有值，不生成新编码，使用现有值:', this.value)
        return
      }
      
      console.log('=== 前端开始生成编码 ===')
      console.log('表名:', this.tableName, '字段名:', this.fieldName)
      console.log('当前currentValue:', this.currentValue)
      console.log('传入的value:', this.value)
      
      this.loading = true
      try {
        const response = await generateCode(this.tableName, this.fieldName, this.generateParams)
        console.log('API响应:', response)
        const newCode = response.data
        console.log('提取的编码:', newCode)
        
        this.currentValue = newCode
        this.isTemporaryCode = true // 标记为临时编码
        console.log('设置后的currentValue:', this.currentValue)
        this.$emit('input', newCode)
        this.$emit('code-generated', newCode)
        console.log('=== 前端临时编码生成完成 ===')
      } catch (error) {
        console.error('生成编码失败:', error)
        this.$message.error('生成编码失败: ' + (error.message || '未知错误'))
      } finally {
        this.loading = false
      }
    },
    
    // 确认编码（保存表单时调用）
    async confirmCurrentCode() {
      if (!this.tableName || !this.fieldName) {
        console.warn('请先配置表名和字段名')
        return null
      }
      
      // 如果没有当前编码，先生成一个
      if (!this.currentValue || this.currentValue.trim() === '') {
        console.log('没有当前编码，先生成一个')
        await this.generateNewCode()
        if (!this.currentValue) {
          console.error('生成编码失败')
          return null
        }
      }
      
      // 如果已经是确认的编码，直接返回
      if (!this.isTemporaryCode && this.confirmedCode) {
        console.log('编码已确认，直接返回:', this.confirmedCode)
        return this.confirmedCode
      }
      
      console.log('=== 前端开始确认编码 ===')
      console.log('表名:', this.tableName, '字段名:', this.fieldName)
      console.log('当前编码:', this.currentValue)
      console.log('是否临时编码:', this.isTemporaryCode)
      
      this.loading = true
      try {
        const response = await confirmCode(this.tableName, this.fieldName, this.generateParams)
        console.log('确认编码API响应:', response)
        const confirmedCodeValue = response.data
        console.log('确认的编码:', confirmedCodeValue)
        
        this.currentValue = confirmedCodeValue
        this.confirmedCode = confirmedCodeValue
        this.isTemporaryCode = false // 标记为已确认
        
        this.$emit('input', confirmedCodeValue)
        this.$emit('code-confirmed', confirmedCodeValue)
        console.log('=== 前端编码确认完成 ===')
        
        return confirmedCodeValue
      } catch (error) {
        console.error('确认编码失败:', error)
        this.$message.error('确认编码失败: ' + (error.message || '未知错误'))
        return null
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.coding-input {
  width: 100%;
}

.rule-info {
  margin-top: 5px;
}
</style>